
<template>
  <div>
    <MyHead title="分类" :noBack="true">
      <div @click="gotopage('/address')">
        <van-icon name="location-o"></van-icon>
        <span>定位</span>
      </div>
    </MyHead>
    <div class="cboxs">
      <div class="navs">
        <van-tabs
          v-model="type"
          color="#ee0a24"
          title-active-color="#ee0a24"
          sticky
        >
          <van-tab
            v-for="(item, index) in levels"
            :key="index"
            :title="item"
            :name="index"
          >
            <div class="boxm">
              <div class="left">
                <van-sidebar v-model="activeKey">
                  <van-sidebar-item title="有录音" />
                  <van-sidebar-item title="无录音" />
                </van-sidebar>
              </div>
              <div class="right">
                <MList
                  :noques="true"
                  v-if="activeKey == 0"
                  :list="
                    list.filter(
                      (v) => lel[type].indexOf(v.level) > -1 && v.audioSrc
                    )
                  "
                ></MList>
                <MList
                  :noques="true"
                  v-if="activeKey == 1"
                  :list="
                    list.filter(
                      (v) => lel[type].indexOf(v.level) > -1 && !v.audioSrc
                    )
                  "
                ></MList>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { todogetallinters } from "@/api/api";
export default {
  data() {
    return {
      type: 0,
      activeKey: 0,
      list: [],
    };
  },
  methods: {
    async getAllMsList() {
      let res = await todogetallinters();
      if (res.code == 200) {
        this.list = res.result;
      }
    },
  },
  mounted() {
    this.getAllMsList();
  },
};
</script>

<style lang="scss" scoped>
.classify {
  width: 100%;
  height: 100vh;
  // .boxm {
  //   display: flex;
  //   width: 100%;
  //   height: calc(100vh - 90px);
  //   .left {
  //     flex-shrink: 0;
  //   }
  //   .right {
  //     flex: 1;
  //     height: 100%;
  //     overflow: auto;
  //   }
  // }
}
.boxm {
  display: flex;
  width: 100%;
  height: calc(100vh - 90px);
}
.boxm .left {
  flex-shrink: 0;
}
.boxm .right {
  flex: 1;
  height: 100%;
  overflow: auto;
}
</style>

